<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title></title> 
<link href="${pageContext.request.contextPath}/static/css/base.css" rel="stylesheet">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/uimaker/easyui.css">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath}/static/uimaker/icon.css">
<link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/providers.css">
</head> 
<body>
    <div class="container">
       <table id="dg" title="" style="width:100%;"
			data-options="
				rownumbers: true,
				singleSelect: true,
				animate: true,
				collapsible: true,
				fitColumns: true,
				pagination:true,
				url: '${pageContext.request.contextPath}/role/data',
				method: 'get',
				toolbar: '#tb'
			">
		<thead>
			<tr>
				<th data-options="field:'name',width:80">角色名称</th>
				<th data-options="field:'code',width:60">角色代码</th>
				<th data-options="field:'description',width:80">描述</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:0 30px;">
        <div class="opt-buttons">
            <a href="#" class="easyui-linkbutton add-btn" data-options="selected:true">新增</a>
            <a href="#" class="easyui-linkbutton edit-btn">修改</a>
            <a href="#" class="easyui-linkbutton del-btn">删除</a>
            <a href="#" class="easyui-linkbutton opt-btn">资源分配</a>
        </div>
      </div>
    </div>
    <div id="dlg" class="easyui-dialog" style="width:500px;height:350px;padding:10px 20px"
		data-options="buttons:'#dlg-buttons',closed:true">
		<form id="form0" method="post">
				<input type="hidden" name="id"/>
		      	<table class="kv-table">
					<tbody>
						<tr>
							<td class="kv-label">角色名称</td>
							<td class="kv-content">
								<input name="name" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">角色代码</td>
							<td class="kv-content">
								<input name="code" class="easyui-textbox" data-options="required:true"/>
							</td>
						</tr>
						<tr>
							<td class="kv-label">描述</td>
							<td class="kv-content">
								<input name="description" class="easyui-textbox"/>
							</td>
						</tr>
					</tbody>
				</table>
		</form>
	</div>
	<div id="dlg-buttons">
		<a href="#" class="easyui-linkbutton save-btn">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg').dialog('close')">取消</a>
	</div>
	
	    <div id="dlg1" class="easyui-dialog" style="width:500px;height:350px;padding:10px 20px"
		data-options="buttons:'#dlg-buttons1',closed:true">
		<form id="form1" method="post">
				<input type="hidden" name="id"/>
		      	<table class="kv-table">
					<tbody>
						<tr>
							<td class="kv-label">请选择资源</td>
							<td class="kv-content">
								<select id="cc" name="resIds" class="easyui-combotree" data-options="url:'${pageContext.request.contextPath}/resource/selectthreeleveldata',method:'get',required:true" multiple style="width:200px;"></select>
							</td>
						</tr>
					</tbody>
				</table>
		</form>
	</div>
	<div id="dlg-buttons1">
		<a href="#" class="easyui-linkbutton save-submit">保存</a>
		<a href="#" class="easyui-linkbutton" onclick="javascript:$('#dlg1').dialog('close')">取消</a>
	</div>
	
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/static/js/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript">
    	var formatOpt = function(value, row) {
    		// value => 格式化之前的数据
    		// row => 当前这一行数据的json对象
    		// index => 下标
    		/* alert(value);
    		alert(JSON.stringify(row)) */
    		return "<a class='row-edit-btn'>修改</a> <a class='row-del-btn'>删除</a>";
    	}
    
        $(function(){
            $('#dg').datagrid(); // 加载表格
            
            $('body').on('click', '.row-edit-btn', function() {
            	$('.edit-btn').click();
            });
            
            $('body').on('click', '.row-del-btn', function() {
            	$('.del-btn').click();
            });
            
            $('.add-btn').on('click', function() {
            	// 显示模态框并设置标题
            	$('#form0').form('clear');
            	$('#dlg').dialog('open').dialog('setTitle', '新增角色');
            });
            
            $('.del-btn').on('click', function() {
            	var row = $('#dg').datagrid('getSelected');
            	if (row) {
            		$.messager.confirm(
            				'提示', 
            				'确定要删除吗?', 
            				function(r){
            					if(r === true) {
            						// 真的要执行删除
            						// alert('删除')
            						// js => java request ajax
            						$.getJSON(
            								'${pageContext.request.contextPath}/role/del', 
            								{ "id" : row.id }, function(result) {
            									if (result.success === false){
            			            				$.messager.alert('错误', result.msg, 'error');
            			            			} else {
            			            				$('#dlg').dialog('close'); // 关闭模态框
            			            				$('#dg').datagrid('reload'); // 重新加载树
            			            				// 成功
            			            				$.messager.show({
            			            					title: '提示',
            			            					msg: result.msg
            			            				})
            			            			}
            								});
            						
            						
            					}
        			});
            	} else {
            		$.messager.alert('提示', '请选择一条需要删除的记录', 'info');
            	}
            	
            });
            
            $('.opt-btn').on('click', function() {
            	var row = $('#dg').datagrid('getSelected');
            	if (row) {
            		$('#form1').form('clear');
            		$('#form1').form('load', row);
            		$.getJSON('${pageContext.request.contextPath}/role/selectResByRid', {"id":row.id}, function(data) {
            			$('#cc').combotree('setValues', data);
            		})
            		$('#dlg1').dialog('open').dialog('setTitle', '资源分配');
            		
            	} else {
            		$.messager.alert('提示', '请选择一条记录', 'info');
            	}
            });
            
            // 修改按钮的点击事件
            $('.edit-btn').on('click', function() {
            	var row = $('#dg').datagrid('getSelected');
            	// alert(JSON.stringify(row)); // object=>string
            	if (row) {
            		// 可以进行修改
            		// 显示模态框并修改标题
            		$('#dlg').dialog('open').dialog('setTitle', "修改角色");
            		
            		// form submit     提交表单
            		//      validate   表单校验
            		//      load       用row加载表单
            		//      clear      用来清空表单
            		$('#form0').form('load', row);
            		$('#nameInput').textbox('setValue', row.text);
            		$('#parIdInput').combotree('setValue', row._parentId);
            	} else {
            		$.messager.alert('提示', '请选择一条需要修改的记录', 'info');
            	}
            });
            
            
            $('.save-submit').on('click', function() {
            	$('#form1').form('submit',{
            		url: '${pageContext.request.contextPath}/role/saveroleandres',
            		onSubmit: function(){
            			return $(this).form('validate');
            		},
            		success: function(result){
            			var result = eval('(' + result + ')'); // string=>json
            			if (result.success === false){
            				$.messager.alert('错误', result.msg, 'error');
            			} else {
            				$('#dlg1').dialog('close'); // 关闭模态框
            				// 成功
            				$.messager.show({
            					title: '提示',
            					msg: result.msg
            				})
            			}
            		}
            	});
            });
            
            
            $('.save-btn').on('click', function() {
				// 先做前端校验
				// 再提交表单
            	$('#form0').form('submit',{
            		url: '${pageContext.request.contextPath}/role/save',
            		onSubmit: function(){
            			// 做表单校验
            			// this => dom对象
            			// $(this) => jquery对象
            			// $(this)[0] => 将jquery对象变成dom对象
            			
            			// $()  jquery
            			// domcument.getElement[s]By[*]  dom
            			
            			// .innerHTML .value .innertText       dom
            			// .html() .text() .val()              jquery
            			return $(this).form('validate');
            		},
            		success: function(result){
            			var result = eval('(' + result + ')'); // string=>json
            			if (result.success === false){
            				$.messager.alert('错误', result.msg, 'error');
            			} else {
            				$('#dlg').dialog('close'); // 关闭模态框
            				$('#dg').datagrid('reload'); // 重新加载树
            				// 成功
            				$.messager.show({
            					title: '提示',
            					msg: result.msg
            				})
            			}
            		}
            	});
            });
        });        
    </script>
</body> 
</html>
